{% extends 'base.html' %}

{% block title %}
    {{ blog_id }}
{% endblock %}

{% block head %}
    <link rel="stylesheet" href={% static 'highlight/styles/github-dark.min.css' %}>
    <script src={% static 'highlight/highlight.min.js' %}></script>

    </link>
{% endblock %}

{% block main %}
    <h1>{{ blog.title }}</h1>
    <hr>
    <div class="mt-2">
        <div>
            <img src="{% static 'images/可爱蜘蛛侠.png' %}" class="rounded-circle" alt="" height="30">
            <span class="ms-2"> {{ blog.author }}</span>
            <span class="ms-2"> 发布时间:</span>
            <span class="ms-2"> {{ blog.publish_time|date:'Y年m月d日 H时i分s秒' }}</span>
        </div>
    </div>
    <hr>
    <div class="py-2">
        {{ blog.content|safe }}
    </div>
    <hr>
    <div class="mt-2">
        <h3>评论（{{ blog.comments.all|length }}）</h3>
        <form action="{% url 'blog:pub_comment' %}" method="post">
            {% csrf_token %}
            <input type="hidden" name="blog_id" value="{{ blog.id }}">
            <div>
                <input type="text" class="form-control" placeholder="请输入评论" name="content">
            </div>
            <div class="text-end mt-2">
                <button type="submit" class="btn btn-primary">评论</button>
            </div>
        </form>
    </div>
    <hr>
    <div class="mt-2">
        <ul class="list-group list-group-flush mb-2">
            {% for comment in blog.comments.all %}
                <li class="list-group-item">
                    <div class="d-flex justify-content-between text-body-secondary">
                        <div class="user-info">
                            <img src="{% static 'images/可爱蜘蛛侠.png' %}" class="rounded-circle" alt="" height="40">
                            <span class="ms-2"> {{ comment.author }}</span>
                        </div>
                        <div class="create-time" style="line-height: 40px">
                            <span class="ms-2"> 发布时间:</span>
                            <span class="ms-2"> {{ comment.create_time|date:'Y年m月d日 H时i分s秒'}}</span>
                        </div>
                    </div>
                    <div class="mt-2">
                        {{ comment.content }}
                    </div>
                </li>
            {% endfor %}
        </ul>
    </div>
    </main>
    
    <script>
        hljs.highlightAll();
    </script>
{% endblock %}

